<ng-container *ngIf="activeEnvironmentUUID$ | async as activeEnvironmentUUID">
  <ng-container *ngIf="environmentsLogs$ | async as environmentsLogs">

    <div class="row h-100 environment-logs" *ngIf="environmentsLogs[activeEnvironmentUUID]?.length; else empty">
      <div class="col-4 h-100 menu-column--width environment-logs-column">
        <ul class="nav flex-column menu-list">
          <li class="nav-item" *ngFor="let log of environmentsLogs[activeEnvironmentUUID]; let logIndex = index">
            <a class="nav-link" [ngClass]="{'active': logIndex === (selectedLogIndex$ | async)}"
              (click)="showLogDetails(logIndex)">
              <div class="d-flex flex-column">
                <div class="d-flex flex-row">
                  <div class="d-flex flex-row w-100 route">
                    <div>
                      <span class="badge badge-default ml-0 mr-3 http-method-{{log.method | lowercase}}">{{log.method | uppercase}}</span>
                    </div>
                    <div class="ellipsis">{{log.url}}</div>
                  </div>
                  <div>
                    <span *ngIf="log.route" class="float-right text-success">
                      <i class="material-icons" ngbTooltip="Request caught">check</i>
                    </span>
                  </div>
                  <div>
                    <span *ngIf="!log.route && log.proxied" class="float-right text-primary">
                      <i class="material-icons" ngbTooltip="Request proxied">security</i>
                    </span>
                  </div>
                </div>
                <div class="menu-subtitle ellipsis">
                  {{log.timestamp | date:'yyyy-MM-dd HH:mm:ss:SSS'}}
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
      <div class="col h-100 environment-logs-column">
        <div *ngIf="environmentsLogs[activeEnvironmentUUID][(selectedLogIndex$ | async)] as selectedLog"
          class="environment-logs-content pl-2 pr-2">
          <div class="environment-logs-content-title" (click)="generalCollapsed = !generalCollapsed">
            <i *ngIf="!generalCollapsed" class="material-icons">unfold_less</i>
            <i *ngIf="generalCollapsed" class="material-icons">unfold_more</i>
            General
          </div>
          <div [ngbCollapse]="generalCollapsed">
            <div class="environment-logs-content-item">
              <strong>Request URL:</strong> {{selectedLog.url}}
            </div>
            <div class="environment-logs-content-item">
              <strong>Method:</strong> {{selectedLog.method}}
            </div>
            <div *ngIf="selectedLog.route" class="environment-logs-content-item">
              <strong>Caught by route:</strong> {{selectedLog.route}}
            </div>
          </div>

          <!-- Headers -->
          <div class="environment-logs-content-title" (click)="headersCollapsed = !headersCollapsed">
            <i *ngIf="selectedLog.headers.length && !headersCollapsed" class="material-icons">unfold_less</i>
            <i *ngIf="selectedLog.headers.length && headersCollapsed" class="material-icons">unfold_more</i>
            Headers ({{selectedLog?.headers?.length}})
          </div>
          <div [ngbCollapse]="headersCollapsed">
            <div class="environment-logs-content-item" *ngFor="let header of selectedLog?.headers">
              <strong>{{header.name | titlecase}}:</strong> {{header.value}}
            </div>
          </div>

          <!-- Route params -->
          <div class="environment-logs-content-title" (click)="routeParamsCollapsed = !routeParamsCollapsed">
            <i *ngIf="selectedLog.params.length && !routeParamsCollapsed" class="material-icons">unfold_less</i>
            <i *ngIf="selectedLog.params.length && routeParamsCollapsed" class="material-icons">unfold_more</i>
            Route params ({{selectedLog?.params?.length}})
          </div>
          <div [ngbCollapse]="routeParamsCollapsed">
            <div class="environment-logs-content-item" *ngFor="let param of selectedLog?.params">
              <strong>{{param.name}}:</strong> {{param.value}}
            </div>
          </div>

          <!-- Query params -->
          <div class="environment-logs-content-title" (click)="queryParamsCollapsed = !queryParamsCollapsed">
            <i *ngIf="selectedLog.queryParams.length && !queryParamsCollapsed" class="material-icons">unfold_less</i>
            <i *ngIf="selectedLog.queryParams.length && queryParamsCollapsed" class="material-icons">unfold_more</i>
            Query params ({{selectedLog?.queryParams?.length}})
          </div>
          <div [ngbCollapse]="queryParamsCollapsed">
            <div class="environment-logs-content-item" *ngFor="let queryParam of selectedLog?.queryParams">
              <strong>{{queryParam.name}}:</strong> {{queryParam.value}}
            </div>
          </div>

          <!-- Body -->
          <div class="environment-logs-content-title" (click)="bodyCollapsed = !bodyCollapsed">
            <i *ngIf="selectedLog.body && !bodyCollapsed" class="material-icons">unfold_less</i>
            <i *ngIf="selectedLog.body && bodyCollapsed" class="material-icons">unfold_more</i>
            Body ({{(!selectedLog.body)?'none': 'raw'}})
          </div>
          <div [ngbCollapse]="bodyCollapsed">
            <div class="environment-logs-content-item pre">{{selectedLog.body}}</div>
          </div>
        </div>
      </div>
    </div>

    <ng-template #empty>
      <p class="message">No records yet</p>
    </ng-template>

  </ng-container>
</ng-container>
